//out:../css/
@import './base.less';
@vw:3.75vw;
body {
    background-color: #f9fafb;
}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (15 / @vw);
    width: 100%;
    height: (50 / @vw);
    background-color: #fff;
    position: fixed;
    top: 0;
.left{
    width: (235 / @vw);
    height: (50 / @vw);
    background-image: url(../assets/head.png);
    background-repeat: no-repeat;
    background-size: contain;
}
a {
    width: (80 / @vw);
    height: (30 / @vw);
    background-color: #ffe31b;
    border-radius: (15 / @vw);
    text-align: center;
    line-height: (30 / @vw);
    font-size: (14 / @vw);
  }
}
.search {
    margin-top: (50/@vw);
    padding: (10 / @vw) (15 / @vw);
    height: (52 / @vw);
    // background-color: pink;
    .txt {
      height: (32 / @vw);
      background-color: #f2f4f5;
      border-radius: (16 / @vw);
      text-align: center;
      line-height: (32 / @vw);
      color: #a1a4b3;
      font-size: (14 / @vw);
      .iconfont {
        font-size: (16 / @vw);
      }
    }
  }
.bottom{
    position: fixed;
    left: (15 / @vw);
    bottom: (30 / @vw);
    display: flex;
    align-items: center;
    padding: 0 (10 / @vw) 0 (15 / @vw);
    width: (345 / @vw);
    height: (45 / @vw);
    background-color: #faf8f8;
    border-radius: (22 / @vw);
    img {
      margin-right: (10 / @vw);
      width: (36 / @vw);
      height: (36 / @vw);
    }
    p {
      flex: 1;
      font-size: (14 / @vw);
    }
    span {
      width: (32 / @vw);
      height: (32 / @vw);
      background-color: #f2f3f5;
      border-radius: 50%;
      text-align: center;
      line-height: (32 / @vw);
      font-size: (16 / @vw);
    }
}
.banner{
    // width: (485/@vw);
    height: (108/@vw);
    padding:0 (10/@vw);
    img{
        width: 100%;
        height: (139/@vw);
        object-fit: cover;
    }
}
.ph{
    width: 100%;
    padding:0 (10/@vw);
    .title{
        display: flex;
        justify-content: space-between;
        margin-top: (50/@vw);
        margin-bottom: (16/@vw);
        line-height: (25/@vw);
        h4{
            font-size: (20/@vw);
        }
        a{
            font-size: (12/@vw);
            color: #a1a4b3;
        }
     
    }
    .content{
        .first{
            display: flex;
            margin-bottom: (16/@vw);
            img{
                width: (105/@vw);
                border-radius: (10/@vw);
                margin-right: (20/@vw);
            }
            .list{
                font-size: (14/@vw);
                color: #333;
                .more{
                    font-size:(14/@vw);
                    color: #333;
                }
                a{
                    display: block;
                    font-size: (12/@vw);
                    color: #a1a4b3;
                    line-height: 1.8;
                }
            }
            
        }
    
    }
}

.recommond{
    width: 100%;
    padding:0 (10/@vw);
    .title{
        display: flex;
        justify-content: space-between;
        margin-bottom: (16/@vw);
        line-height: (25/@vw);
        h4{
            font-size: (20/@vw);
        }
        a{
            font-size: (12/@vw);
            color: #a1a4b3;
        }
     
    }
    .content{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .list{
            width: (105/@vw);
            height: (143/@vw);
            margin-bottom: (16/@vw);
            .tj{
                position: relative;
                width: (105/@vw);
                height: (105/@vw);
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: (10/@vw);
                }
                a{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: (70/@vw);
                    height: (28/@vw);
                    background-color: rgba(0, 0, 0, 0.8);
                    border-radius: 0 (10/@vw) 0 (10/@vw);
                    text-align: center;
                    line-height: (28/@vw);
                    color: #fff;
                    font-size: (14/@vw);
                }
            }
            p{
                margin-top: (10/@vw);
                font-size: 3.7vw;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; 
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}